<!doctype html>
<html lang="en" id="friend_index" v-cloak>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <title>爱的约定</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <link rel="stylesheet" href="lib/weui/dist/style/weui.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/friend_index.css">
</head>
<body>
<div v-if="!filter">

    <div class='common-header'>
        <!--<div class='left' @click="switchFilter()">
            筛选
        </div>-->

        <div class="middle">
            寻找TA
        </div>

        <div class="right" onclick="window.location.href = 'add_page.html' "><i class='iconfont'>&#xe623;</i>{{defaultAdd}}</div>
    </div>
    <!-- 筛选 -->
    <div>
        <!--<div class='common-header'>
            <div class='left '>
                <a href="javascript:;" @click="switchFilter()">
                    <i class='iconfont icon-left'></i>
                </a>
            </div>
            <div class="middle">筛选会员</div>
            <div class="right">
                <a href="javascript:;" @click="confirmFilter()">确定</a>
            </div>
        </div>-->

        <!--<div class='select'>
            <span>
                <i class='iconfont icon-fd'></i>
            </span>
            <span>
                <!--<input type='text' placeholder="请输入会员ID或昵称"/>
            </span>
        </div>-->

        <div class='list'>
           <div id="cen">
             <input class="inp" type="text" placeholder="请输入会员昵称" v-model="mateName"/>
             
           </div>
        

            <ul>
                <li>
                    <span>
                        婚姻状况：
                        <select v-model="marriage">
                            <option value='' disabled selected style='display:none;'>请选择</option>
                            <option v-for="item in filterArr[6]" :value="item.id">{{item.name}}</option>
                        </select>
                    </span>
                    <span>
                        性别：
                        <select v-model="sex">
                            <option value=''>请选择</option>
                            <option v-for="item in filterArr[340]" :value="item.id">{{item.name}}</option>
                        </select>
                    </span>
                </li>

                <li>
                    <span>
                        年龄范围：
                        <select v-model="ageMin">
                            <option value='' disabled selected style='display:none;'>请选择</option>
                            <option v-for="age in ageArr">{{age}}</option>
                        </select>

                        <select v-model="ageMax">
                            <option value='' disabled selected style='display:none;'>请选择</option>
                            <option v-for="age in ageArr">{{age}}</option>
                        </select>
                    </span>
                </li>

                <li>
                    <span>
                        文化程度：
                        <select v-model="educations">
                            <option value='' disabled selected style='display:none;'>请选择</option>
                            <option v-for="item in filterArr[8]" :value="item.id">{{item.name}}</option>
                        </select>
                    </span>
                    <span>
                        收入范围
                        <select v-model="income">
                            <option value='' disabled selected style='display:none;'>请选择</option>
                            <option v-for="item in filterArr[418]" :value="item.id">{{item.name}}</option>
                        </select>
                    </span>
                </li>

                <li>
                    <span>
                        所属单位：
                        <select v-model="selectedCityId">
                            <option value='' disabled selected style='display:none;'>请选择</option>
                            <option v-for="item in cityArr" :value="item.id">{{item.name}}</option>
                        </select>

                        <select v-model="selectedCountyId">
                            <option value='' disabled selected style='display:none;'>请选择</option>
                            <option v-for="item in countyArr" :value="item.id">{{item.name}}</option>
                        </select>
                    </span>
                </li>
            </ul>
            <div class="submit-btn">
                <button class="submit" @click="confirmFilter()">查找</button>
            </div>
        </div>
    </div>

    <!-- <div class='item one'> -->
    <div class='item' v-for="item in renderObj.listArr">
        <div class="item-top" @click="goDetail(item.id)">
            <!-- <img src="img/item1.png" alt=""> -->
            <span class="user-header">
                <img v-if="item.headImg.indexOf('upload')!=-1" :src="'http://appapp.b0.upaiyun.com' + item.headImg+'!/quality/10'">
                <img v-if="item.headImg.indexOf('upload')==-1" :src="item.headImg">
            </span>
            
            <div class='right'>
                <!-- <div class="ringht-xinxi">
                    <i class='iconfont icon-em xin'v-on:click.stop.prevent  @click="sayhi(item.id)"></i>
                    <i class='iconfont icon-xiaoxi xinxi' v-on:click.stop.prevent @click="sendMsgDialog(item.id)"></i>
                </div> -->

                <h2>{{item.nickName}}</h2>

                <p class="user-info">
                    <span>{{item.age}}岁 {{item.sex==402?'男':'女'}} {{item.height}}cm {{item.cregion.name}}{{item.xregion.name}}</span>
                </p>
                
                <p v-if="item.monologue.length>55">{{item.monologue.substring(0,55)}}...</p>
                <p v-if="item.monologue.length<=55">{{item.monologue}}</p>
            </div>

        </div>
        <div class="item-bottom">
                <span @click="sayhi(item.id)" v-on:click.stop.prevent >
                    <i class='iconfont icon-em xin active'></i>
                    <b>打招呼</b>
                </span>
                <span class="leave-msg" @click="sendMsgDialog(item.id)">
                    <i class='iconfont icon-chat1'></i><b>发留言</b>
                </span>
                <!--<span>
                    <i class='iconfont icon-star'></i><b>关注</b>
                </span>-->
        </div>
    </div>
    <!-- 打招呼 -->
    <div class="modal" id="greet" v-if="msgDialog">
        <div class="main">
            <i @click="switchSayhi()" class="iconfont icon-x"></i>
            <div class="content">
                <div v-for="msg in msgList"
                     :class=" {'cur':selectMsgIndex==$index }"
                     @click="selectMsgFn($index,msg.content)">
                    {{msg.content}}
                </div>
            </div>
            <div class="modal-footer">
                <a @click="exchangeMsg()" href="javascript:;">换一组</a>
                <a @click="submitMsg()" href="javascript:;">打招呼</a>
            </div>
        </div>
    </div>
    <!-- 发消息 -->
    <div class='modal' id='letter' v-if="showSendMsg">
        <div class='main'>
            <i @click="sendMsgDialog()" class='iconfont icon-x'></i>
            <div class='content'>
                <!-- <h2>在这里写信件内容</h2> -->
                <div class='controls'>
                    <span>内容</span>
                    <textarea v-model="msgContent"></textarea>
                </div>
                <p>
                    您可以免费给TA写信件，对方也可以免费看信，建议互相熟悉后再交换联系方式，禁止发送不良信息，否则账号一律查封。
                </p>
            </div>
            <div class='modal-footer'>
                <a @click="sendMsgDialog()" href="javascript:;">取消</a>
                <a @click="sendMsg(msgContent)" href="javascript:;">发留言</a>
            </div>
        </div>
    </div>

    <!-- footer -->
    <div class='footer'>
        <a href="index.html">
            <i class='iconfont'>&#xe611;</i>
            <p>首页</p>
        </a>
        <a href="activity_list.html">
            <i class='iconfont'>&#xe64d;</i>
            <p>活动</p>
        </a>
        <a class='active' href="friend_index.html">
            <i class='iconfont ta'>&#xe62a;</i>
            <p>TA</p>
        </a>
        <a href="mood.html">
            <i class='iconfont ss'>&#xe66a;</i>
            <p>说说</p>
        </a>
        <a href="uc_index.html">
            <i class='iconfont self'>&#xe66f;</i>
            <p>个人</p>
        </a>
    </div>
</div>

</body>
<script>var app = 'friend_index';</script>
<script data-main="js/common/require_config" src="lib/requirejs/require.js"></script>
</html>